<template>
  <view class="container">
    <view class="status" :style="{ opacity: afterHeaderOpacity }"></view>
    <custom-navbar :immersive="true" title="商品详情" color="#333"> </custom-navbar>

    <view class="container_content_header" :style="{ paddingTop: `${navbarHeight}px` }"> </view>
    <view class="container_content">
      <scroll-view scroll-y="true" :style="{ height: contentHeight + 'px' }">
        <view class="container_content_pic">
          <image :src="item.mainImage ? item.mainImage : image" mode="aspectFit" />
        </view>
        <view class="container_content_middle">
          <view class="container_content_middle_tip">
            <image src="/static/image/item_tip.png" mode="widthFix" />
          </view>
          <view class="container_content_middle_info">
            <itemPrice :price="item.taxPrice"></itemPrice>
            <view class="container_content_middle_info_des">{{ item.goodsName }}</view>
          </view>
        </view>

        <view class="container_content_detail">
          <block v-if="item.detailImage">
            <view v-for="(subItem, subIndex) in JSON.parse(item.detailImage)" :key="subIndex"><image :src="subItem ? subItem : image" mode="aspectFill" class="container_content_detail_pic" /></view>
          </block>

          <view>{{ item.describes ? item.describes : '' }}</view>
        </view>
      </scroll-view>
    </view>

    <view class="container_bottom">
      <view class="container_bottom_header">
        <itemPrice :price="taxAmount"></itemPrice>
        <cartNumAddSub :item="tempItem" :index="index" @handleOperateCount="handleOperateCount" @updateGoodCount="updateGoodCount"></cartNumAddSub>
      </view>
      <view class="container_bottom_footer">
        <button @click="addCart">加入购物车</button>
      </view>
    </view>
  </view>
</template>

<script>
import { debounce, getScreen, getUserInfo } from '@/service/auth'
import navbarMixin from '@/mxins/navbar.js'
import itemPrice from '@/components/itemPrice'
import cartNumAddSub from '@/components/cartNumAddSub.vue'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  mixins: [navbarMixin],
  components: { itemPrice, cartNumAddSub },
  data() {
    return {
      item: {},
      currentIndex: -1,
      tempItem: {},
      contentHeight: 0,
    }
  },
  onLoad(option) {
    console.log('option', option)
    if (option.item) {
      this.item = JSON.parse(decodeURIComponent(option.item))
      console.log('item', this.item)
      this.tempItem = { ...this.item, goodsCount: this.item.goodsCount || 1 }
      console.log('detail', this.item)
      console.log('tempItem', this.tempItem)
    }
    // if (option.index) {
    //   this.currentIndex = option.index
    // }
  },
  created() {
    const { width, height } = getScreen()
    this.contentHeight = height - (290 * width) / 750
  },
  computed: {
    taxAmount() {
      return Number(this.tempItem.taxPrice * this.tempItem.goodsCount).toFixed(2)
    },
    ...mapState({
      cartItems: state => state.cart.cartItems,
    }),
    ...mapGetters(['totalPrice', 'totalGoodsCount']),
  },

  methods: {
    ...mapMutations('cart', ['updateGoodsCount', 'removeFromCart', 'toggleSelect', 'addToCart']),
    addCart() {
      //   const existingItem = this.goodsList.find(_item => _item.goodsId === item.goodsId)
      if (!this.tempItem.goodsCount) {
        return this.uniShowToast('请输入数量')
      }
      if (this.tempItem) {
        this.tempItem.goodsCount = this.tempItem.goodsCount
        this.$store.commit('addToCart', this.tempItem)
        this.uniShowToast('已加入购物车')
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          })
        }, 500)
      }
    },
    updateGoodCount(item) {
      console.log('updateGoodCount', item)

      if (item.goodsCount && item.goodsCount <= 0) {
        item.goodsCount = 1
      }
      if (this.tempItem) {
        this.tempItem.goodsCount = item.goodsCount
      }

      //直接更新购物车数量
      this.$store.commit('updateGoodsCount', { goodsId: item.goodsId, goodsCount: item.goodsCount })
    },
    handleOperateCount(params) {
      //修改数量不加入购物车
      console.log('params', params)
      const { item, index, type } = params
      if (type === 'add') {
        const count = item.goodsCount + 1
        // this.$store.commit('updateGoodsCount', { goodsId: item.goodsId, goodsCount: count })
        if (this.tempItem) {
          this.tempItem.goodsCount = count
        }
      } else if (type === 'del') {
        if (item.goodsCount >= 2) {
          const count = item.goodsCount - 1
          // this.$store.commit('updateGoodsCount', { goodsId: item.goodsId, goodsCount: count })
          if (this.tempItem) {
            this.tempItem.goodsCount = count
          }
        }
      }
    },
  },
}
</script>

<style lang="scss">
.container {
  background-color: #f5f6fa;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  display: flex;
  flex-direction: column;
  width: 100vw;
  &_content {
    margin: 0 20rpx;
    flex: 1;
    overflow-y: auto;
    &_pic {
      width: 400rpx;
      height: 400rpx;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }
    &_middle {
      &_tip {
        background-color: #fed8d3;
        padding: 10rpx 0 10rpx 20rpx;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        image {
          width: 60%;
        }
      }
      &_info {
        background-color: white;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;
        padding: 20rpx;
        &_price {
          font-weight: 600;
          font-size: 32rpx;
          font-family: PingFang SC;

          color: red;
          &_label {
            font-size: 26rpx;
          }
        }
        &_des {
          font-weight: bold;
          font-size: 40rpx;
        }
      }
    }

    &_detail {
      margin-top: 20rpx;
      padding: 20rpx 20rpx 150rpx 20rpx;
      &_pic {
        width: 400rpx;
      }
    }
  }

  &_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: white;
    border-top: 1rpx solid #a9b4c8;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);
    &_header {
      display: flex;
      justify-content: space-between;
    }
    &_footer {
      margin-top: 20rpx;
      button {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        color: white;
        background: linear-gradient(to left, #ff8f00, #ffb300);
      }
    }
  }
}
</style>
